import React, { Component } from "react";

import { Space, Avatar, Button, Row, Col, Spin, message, List } from "antd";
import { Link } from "react-router-dom";
import Header from "../../components/header";
import Footer from "../../components/footer";
import {
  SearchOutlined,
  CrownOutlined,
  NotificationOutlined,
} from "@ant-design/icons";
import "./home.css";
import moment from "moment";

import { _newsList } from "../../utils/news/index";
const url = require("../../utils/conUrl");

export default class index extends Component {
  state = {
    isLoading: false,
    newsList: [],
  };
  onChange(a, b, c) {
    console.log(a, b, c);
  }
  getData = () => {
    this.setState({ isLoading: true });
    _newsList()
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          this.setState({ isLoading: false });
          this.setState({ newsList: res.data.data });
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };
  componentDidMount = () => {
    this.getData();
  };
  render() {
    const data1 = [
      {
        name: "	王昊鹏",
        class: "软件17-1",
        icon: (
          <svg
            t="1592988154090"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2280"
            width="30"
            height="30"
          >
            <path
              d="M800.9 335H224V16.9C224 7.6 231.6 0 240.9 0H784c9.3 0 16.9 7.6 16.9 16.9V335z"
              fill="#FFF7D7"
              p-id="2281"
            ></path>
            <path
              d="M224 0h138.1v303.2H224V0z m219.4 0h138.1v303.2H443.4V0z m219.4 0h138.1v303.2H662.8V0z"
              fill="#F94F46"
              p-id="2282"
            ></path>
            <path
              d="M85 597.3C85 832.9 276 1024 511.7 1024s426.7-191 426.7-426.7-191-426.7-426.7-426.7S85 361.7 85 597.3z"
              fill="#FEE701"
              p-id="2283"
            ></path>
            <path
              d="M213 597.3C213 704 269.9 802.6 362.4 856c92.4 53.3 206.2 53.3 298.6 0 92.4-53.3 149.4-152 149.4-258.7 0-165-133.7-298.6-298.6-298.6S213 432.3 213 597.3z"
              fill="#F5B319"
              p-id="2284"
            ></path>
            <path
              d="M524.2 447.9h34.4V747h-45.7V502.8c-18 17.2-41.1 29.7-68.7 37.7v-45.2c13.4-3.4 27.2-9.2 42.3-17.6 15.1-9.3 27.7-18.9 37.7-29.8z m-267.4-93c-4.5 0-9-1.8-12.4-5.4-6.5-6.9-6.2-17.7 0.7-24.1 6.7-6.3 13.6-12.3 20.7-18.1 3.4-2.7 6.9-5.5 10.3-8.1 7.6-5.8 18.3-4.2 23.9 3.3 5.8 7.6 4.2 18.3-3.3 23.8-3.2 2.4-6.3 4.7-9.4 7.3-6.4 5.3-12.8 10.7-18.9 16.5-3.2 3.4-7.4 4.8-11.6 4.8z m614.5 217.3c-8.4 0-15.7-6.2-16.9-14.7-3.5-25.7-9.9-50.9-19.1-75.2-30.7-82-90.8-149.1-168.8-188.7-48.3-24.5-100.3-37.4-154-38.1-52.5-0.7-105.2 10.8-152.9 33.1-6.8 3.2-13.4 6.7-20.1 10.2-8.2 4.5-18.6 1.5-23.2-6.8-4.5-8.2-1.5-18.6 6.8-23.2 7.2-4 14.7-7.8 22-11.2 52.2-24.4 110.1-37 167.8-36.4 59.1 0.7 116 14.7 169.2 41.7 85.9 43.7 151.8 117.2 185.5 207.2 9.9 26.6 17 54.3 20.9 82.4 1.2 9.4-5.3 18-14.7 19.2-0.9 0.4-1.7 0.5-2.5 0.5z"
              fill="#FFFFFF"
              p-id="2285"
            ></path>
          </svg>
        ),
      },
      {
        name: "张康豪",
        class: "计科19-2",
        icon: (
          <svg
            t="1592988304209"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4585"
            width="30"
            height="30"
          >
            <path
              d="M249.6 0H768v236.8H249.6z"
              fill="#174A7A"
              p-id="4586"
            ></path>
            <path
              d="M249.6 83.2H768v76.8H249.6z"
              fill="#AFAEAE"
              p-id="4587"
            ></path>
            <path
              d="M249.6 0C211.2 51.2 166.4 108.8 128 166.4l217.6 332.8 179.2-83.2L249.6 0z"
              fill="#2E79BF"
              p-id="4588"
            ></path>
            <path
              d="M204.8 51.2l-38.4 57.6 236.8 358.4 57.6-25.6-256-390.4z"
              fill="#FFFFFF"
              p-id="4589"
            ></path>
            <path
              d="M768 0l6.4 6.4c32 44.8 76.8 108.8 121.6 160l-217.6 332.8-179.2-83.2L768 0z"
              fill="#2E79BF"
              p-id="4590"
            ></path>
            <path
              d="M812.8 51.2l38.4 57.6-230.4 358.4-57.6-25.6L812.8 51.2z"
              fill="#FFFFFF"
              p-id="4591"
            ></path>
            <path
              d="M812.8 51.2l38.4 57.6-230.4 358.4-57.6-25.6L812.8 51.2z"
              fill="#FFFFFF"
              p-id="4592"
            ></path>
            <path
              d="M166.4 678.4C166.4 870.4 320 1024 512 1024s345.6-153.6 345.6-345.6S704 326.4 512 326.4s-345.6 160-345.6 352z"
              fill="#D9DBEE"
              p-id="4593"
            ></path>
            <path
              d="M236.8 678.4c0 153.6 121.6 275.2 275.2 275.2s275.2-121.6 275.2-275.2S665.6 396.8 512 396.8s-275.2 128-275.2 281.6z"
              fill="#C1C4D8"
              p-id="4594"
            ></path>
            <path
              d="M512 409.6c153.6 0 275.2 121.6 275.2 268.8v-6.4c0-153.6-121.6-275.2-275.2-275.2s-275.2 121.6-275.2 275.2v6.4c0-147.2 121.6-268.8 275.2-268.8z"
              fill="#ABAFC6"
              p-id="4595"
            ></path>
            <path
              d="M569.6 838.4h64V768H492.8c6.4-19.2 19.2-32 51.2-51.2 38.4-25.6 38.4-25.6 51.2-38.4 25.6-19.2 32-38.4 32-70.4 0-12.8-6.4-32-12.8-44.8-19.2-32-57.6-44.8-102.4-44.8-44.8 0-76.8 12.8-96 38.4-12.8 19.2-19.2 32-25.6 64l76.8 6.4c0-12.8 6.4-25.6 6.4-32 6.4-12.8 19.2-19.2 38.4-19.2 25.6 0 38.4 12.8 38.4 32s-6.4 25.6-38.4 44.8c-38.4 25.6-51.2 38.4-64 51.2-25.6 25.6-44.8 51.2-51.2 83.2-6.4 12.8-6.4 25.6-6.4 44.8h179.2z"
              fill="#ABAFC6"
              p-id="4596"
            ></path>
            <path
              d="M569.6 825.6h64v-70.4H492.8c6.4-19.2 19.2-32 51.2-51.2 38.4-25.6 38.4-25.6 51.2-38.4 25.6-19.2 32-38.4 32-70.4 0-12.8-6.4-32-12.8-44.8-19.2-32-57.6-44.8-102.4-44.8-44.8 0-76.8 12.8-96 38.4-12.8 19.2-19.2 32-25.6 64l76.8 6.4c0-12.8 6.4-25.6 6.4-32 6.4-12.8 19.2-19.2 38.4-19.2 25.6 0 38.4 12.8 38.4 32s-6.4 25.6-38.4 44.8c-38.4 25.6-51.2 38.4-64 51.2-25.6 25.6-44.8 51.2-51.2 83.2-6.4 12.8-6.4 25.6-6.4 44.8h179.2z"
              fill="#FFFFFF"
              p-id="4597"
            ></path>
          </svg>
        ),
      },
      {
        name: "许杰",
        class: "数据19-3",
        icon: (
          <svg
            t="1592988390988"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8061"
            width="30"
            height="30"
          >
            <path
              d="M740.960865 257.107027l-94.816865 179.089297c-9.963243 18.708757-30.249514 30.609297-52.473081 30.609298h-191.238919c-22.223568 0-42.482162-11.900541-52.445405-30.609298L255.16973 257.107027a52.085622 52.085622 0 0 1-6.199352-24.76973V79.373838c0-30.609297 26.236541-55.351351 58.644757-55.351352h380.900324c32.380541 0 58.617081 24.742054 58.617082 55.351352v152.935784c0 8.662486-2.158703 17.103568-6.171676 24.769729z"
              fill="#E42D6C"
              p-id="8062"
            ></path>
            <path
              d="M193.619027 702.048865c0 175.768216 142.502054 318.27027 318.27027 318.27027s318.27027-142.502054 318.270271-318.27027-142.502054-318.27027-318.270271-318.27027-318.27027 142.502054-318.27027 318.27027z"
              fill="#F8CB86"
              p-id="8063"
            ></path>
            <path
              d="M511.889297 494.481297c-129.85427 0-235.243243 99.078919-235.243243 221.460757 0 122.354162 105.388973 221.350054 235.243243 221.350054s235.243243-99.078919 235.243244-221.460757c0-122.354162-105.388973-221.350054-235.243244-221.350054z"
              fill="#F1AD59"
              p-id="8064"
            ></path>
            <path
              d="M511.889297 328.427243c-7.693838 0-13.837838-6.088649-13.837838-13.450378V120.472216c0-7.472432 6.254703-13.450378 13.837838-13.450378 7.693838 0 13.837838 6.088649 13.837838 13.450378v194.504649a13.561081 13.561081 0 0 1-13.837838 13.450378z"
              fill="#FFFEFF"
              p-id="8065"
            ></path>
            <path
              d="M622.481297 494.481297L387.348757 896.968649a226.802162 226.802162 0 0 0 129.273081 40.323459c127.363459 0 230.538378-104.973838 230.538378-234.579027a235.021838 235.021838 0 0 0-124.678919-208.231784z"
              fill="#FCCB95"
              p-id="8066"
            ></path>
            <path
              d="M511.889297 937.292108c-129.688216 0-235.243243-105.527351-235.243243-235.243243 0-129.688216 105.555027-235.243243 235.243243-235.243243 129.715892 0 235.243243 105.555027 235.243244 235.243243 0 129.715892-105.527351 235.243243-235.243244 235.243243z m0-445.356973c-115.878054 0-210.224432 94.346378-210.224432 210.224433s94.374054 210.11373 210.224432 210.113729c115.878054 0 210.224432-94.346378 210.224433-210.224432s-94.346378-210.11373-210.224433-210.11373z"
              fill="#D4923D"
              p-id="8067"
            ></path>
            <path
              d="M555.755243 595.027027c13.810162 11.789838 20.756757 28.090811 20.756757 48.626162 0 26.153514-12.647784 43.644541-37.888 52.390054 13.837838 4.483459 24.077838 10.931892 30.941405 19.456 7.666162 8.966919 11.513081 20.563027 11.513081 34.871352 0 22.195892-7.36173 40.240432-22.002162 54.355027-15.470703 14.52973-35.590919 21.863784-60.194594 21.863783-23.552 0-42.537514-6.33773-57.067244-19.123891-15.996541-14.114595-24.825081-34.677622-26.790054-61.772109h37.888c0.608865 15.636757 5.286054 27.675676 14.003892 35.978379 8.108973 7.859892 18.570378 11.679135 31.550271 11.679135 14.225297 0 25.627676-4.262054 34.151783-12.786162a39.852973 39.852973 0 0 0 11.097946-28.533622c0-13.671784-3.929946-23.74573-11.817513-30.166486-7.472432-6.476108-18.598054-9.741838-33.432216-9.741838h-15.968865v-29.529946h15.968865c13.395027 0 23.552-3.044324 30.609297-9.077622 6.752865-6.005622 10.184649-14.972541 10.184649-26.900757 0-11.596108-3.127351-20.452324-9.243676-26.457945-6.531459-6.005622-16.494703-9.077622-29.668324-9.077622-13.395027 0-23.662703 3.514811-30.941406 10.378378-7.666162 6.918919-12.149622 17.712432-13.395027 32.269838H419.397189c1.85427-24.38227 10.378378-43.174054 25.516973-56.430703 14.003892-13.228973 32.380541-19.788108 55.10227-19.788108 23.35827 0 41.928649 5.922595 55.738811 17.491027z"
              fill="#D4923D"
              p-id="8068"
            ></path>
            <path
              d="M583.513946 595.027027c13.837838 11.789838 20.67373 28.090811 20.67373 48.626162 0 26.153514-12.647784 43.644541-37.888 52.390054 13.837838 4.483459 24.077838 10.931892 30.941405 19.456 7.666162 8.966919 11.513081 20.563027 11.513081 34.871352 0 22.195892-7.36173 40.240432-22.002162 54.355027-15.470703 14.52973-35.590919 21.863784-60.194595 21.863783-23.552 0-42.537514-6.33773-57.067243-19.123891-15.996541-14.114595-24.825081-34.677622-26.790054-61.772109h37.888c0.608865 15.636757 5.286054 27.675676 14.003892 35.978379 8.108973 7.859892 18.570378 11.679135 31.55027 11.679135 14.225297 0 25.627676-4.262054 34.151784-12.786162a39.852973 39.852973 0 0 0 11.097946-28.533622c0-13.671784-3.929946-23.74573-11.734486-30.166486-7.472432-6.476108-18.542703-9.741838-33.404541-9.741838h-15.996541v-29.529946h15.996541c13.395027 0 23.552-3.044324 30.609297-9.077622 6.752865-6.005622 10.184649-14.972541 10.184649-26.900757 0-11.596108-3.127351-20.452324-9.243676-26.457945-6.531459-6.005622-16.494703-9.077622-29.696-9.077622-13.367351 0-23.662703 3.514811-30.913729 10.378378-7.693838 6.918919-12.149622 17.712432-13.395028 32.269838H447.155892c1.881946-24.38227 10.378378-43.174054 25.544649-56.430703 14.003892-13.228973 32.380541-19.788108 55.10227-19.788108 23.35827 0 41.928649 5.922595 55.738811 17.491027z"
              fill="#FFFEFF"
              p-id="8069"
            ></path>
          </svg>
        ),
      },
    ];

    return (
      <div>
        <div className="all-container">
          <Header />
          <div className="all-body">
            <div className="index-header">
              <video
                id="v1"
                autoPlay={true}
                loop
                muted
                style={{ width: "100%", zIndex: -11 }}
              >
                <source
                  src={ url.api+"/file/avatar/aiai.mp4"}
                  type="video/mp4"
                />
              </video>
              <div className="index-header-text">
                <div className="index-header-top">
                  <div className="index-header-text1">
                    人工智能虚拟仿真实验平台
                  </div>
                  <div className="index-header-text2">
                    Artificial Intelligence Virtual Simulation Experiment
                    Platform
                  </div>
                </div>
                <Button ghost icon={<SearchOutlined />} size="large">
                  <a href="#news" style={{ color: "#fff" }}>
                    了解更多
                  </a>
                </Button>
              </div>
            </div>

            <Row justify="center" id="news">
              <Col span={15} className="comm-left">
                <div className="h-news">
                  <Spin tip="Loading..." spinning={this.state.isLoading}>
                    <List
                      itemLayout="vertical"
                      size="large"
                      header={
                        <Space style={{ marginLeft: ".3rem" }}>
                          <NotificationOutlined />
                          最新通告
                        </Space>
                      }
                      pagination={{
                        onChange: (page) => {
                          console.log(page);
                        },
                        pageSize: 5,
                      }}
                      dataSource={this.state.newsList}
                      renderItem={(item) => (
                        <List.Item
                          key={item.news_id}
                          extra={
                            <Link to={{ pathname: "/n-d", state: item }}>
                              {"查看"}
                            </Link>
                          }
                        >
                          <List.Item.Meta
                            title={item.news_title}
                            description={moment(item.news_time).format(
                              "YYYY-MM-DD HH:mm"
                            )}
                          />
                        </List.Item>
                      )}
                    />
                  </Spin>
                </div>
              </Col>
              <Col span={5} className="comm-right">
                <div className="h-stu">
                  <List
                    itemLayout="horizontal"
                    header={
                      <Space style={{ marginLeft: ".3rem" }}>
                        <CrownOutlined />
                        今日之星
                      </Space>
                    }
                    dataSource={data1}
                    renderItem={(item) => (
                      <List.Item extra={item.icon}>
                        <List.Item.Meta
                          avatar={
                            <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                          }
                          title={item.name}
                          description={item.class}
                        />
                      </List.Item>
                    )}
                  />
                </div>
              </Col>
              <Col></Col>
            </Row>
          </div>
          <Footer />
        </div>
      </div>
    );
  }
}
